{% extends "_layouts/docs.html" %}

{% block title %}Get started{% endblock %}

{% block content_title %}
<h1>Get started</h1>
<hr />
{% endblock %}

{% block content %}

<p>You can use Vanilla in your projects in a few different ways. See <a href="/docs/building-vanilla">Building with Vanilla</a> and <a href="/docs/customising-vanilla">Customising Vanilla</a> for more in-depth setup instructions.</p>

<h2>Install</h2>

<p>The recommended way to get Vanilla is with <a href="https://www.yarnpkg.com/">yarn</a>:</p>
<pre><code>yarn add vanilla-framework</code></pre>
<p>Or <a href="https://www.npmjs.com/">npm</a>:</p>
<pre><code>npm install vanilla-framework</code></pre>
<p>This will pull down the latest version into your local <code>node_modules</code> folder and save it into your project's dependencies in <code>package.json</code>.</p>

<p>You can now reference Vanilla from your main Sass file - note that the path to <code>node_modules</code> might be different for your project:</p>
<pre><code>// Import the framework
@import 'node_modules/vanilla-framework';

// Include all of Vanilla Framework
@include vanilla;</code></pre>

<p><em>For information on overriding settings and importing only parts of Vanilla, see <a href="/docs/customising-vanilla">Customising Vanilla</a>.</em></p>

<h2>Hotlink</h2>
<p>You can add Vanilla directly to your markup:</p>
<pre><code>&lt;link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla_framework_version_{{ version | replace(".", "_") }}_min.css" /&gt;</code></pre>

<h2>Download</h2>
<p>Download the latest version of Vanilla from GitHub.</p>
<p><a class="p-button--positive" href="https://github.com/canonical/vanilla-framework/archive/v{{ version }}.zip">Download v{{ version }}</a></p>
<p>See the <a href="https://github.com/canonical/vanilla-framework/releases">release notes</a> for details on the latest updates.</p>

<h2>Local development</h2>
<p>To make improvements to Vanilla itself, please follow the instructions on the project’s <a href="https://github.com/canonical/vanilla-framework#vanilla-framework">README.md</a>.</p>
<ul class="p-inline-list">
  <li class="p-inline-list__item"><i class="p-list__icon--matrix"></i><a href="https://matrix.to/#/#vanilla:ubuntu.com">Join us on Matrix</a></li>
  <li class="p-inline-list__item"><i class="p-list__icon--github"></i><a href="https://github.com/canonical/vanilla-framework/issues/new">Fork us on GitHub</a></li>
</ul>

{% endblock %}
